<script setup lang="ts">
import { reactive, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
//引入pinia
import { storeToRefs } from "pinia"
//引入pinia文件
import { useAdmin } from "@/stores/counter"

//使用pinia
const store = useAdmin()  //使用公开的方法
let { userData } = storeToRefs(store)  //拿到方法里定义的值

const isLogin = ref(false)
const token = ref("")

const active = ref(0);
const route = useRoute()

watch(token,() =>{
  isLogin.value = true
})
onMounted(() => {
  // let lastname = JSON.parse(JSON.stringify(localStorage.userInfo));
  // let lastname = localStorage.getItem("userInfo")
  // console.log('11111',localStorage.getItem("userInfo"));

  if (localStorage.getItem("userInfo")) {
    isLogin.value = true
    // userLogin.token = JSON.parse(JSON.stringify(lastname.token))
    token.value = eval("("+localStorage.getItem("userInfo")+")")
  }
})
</script>

<template>

  <header>
    <div class="wrapper" v-if="route.path === '/' ||
      route.path === '/communityView' ||
      route.path === '/courseView' ||
      route.path === '/MeView'
    ">
      <div class="gologin" v-if="!isLogin">
        <div class="gologin-text">登陆领取更多权益</div>
        <div class="gologin-btn">马上登录</div>
      </div>
      <nav>
        <RouterLink to="/">
          <div class="router-box" @click="(active = 0)">
            <div class="router-box-icon">
              <img class="auto-img" v-if="(active != 0)" src="@/assets/icon/shouye.png" alt="">
              <img class="auto-img" v-else src="@/assets/icon/shouye_n.png" alt="">
            </div>
            <div class="router-box-text">首页</div>
          </div>
        </RouterLink>
        <RouterLink to="/communityView">
          <div class="router-box" @click="(active = 1)">
            <div class="router-box-icon">
              <img class="auto-img" v-if="(active != 1)" src="@/assets/icon/shequ_h.png" alt="">
              <img class="auto-img" v-else src="@/assets/icon/shequ_n.png" alt="">
            </div>
            <div class="router-box-text">服务</div>
          </div>
        </RouterLink>
        <RouterLink to="/courseView">
          <div class="router-box" @click="(active = 2)">
            <div class="router-box-icon">
              <img class="auto-img" v-if="(active != 2)" src="@/assets/icon/kechen_f.png" alt="">
              <img class="auto-img" v-else src="@/assets/icon/kechen_n.png" alt="">
            </div>
            <div class="router-box-text">消息</div>
          </div>
        </RouterLink>
        <RouterLink to="/MeView">
          <div class="router-box" @click="(active = 3)">
            <div class="router-box-icon">
              <img class="auto-img" v-if="(active != 3)" src="@/assets/icon/wode_h.png" alt="">
              <img class="auto-img" v-else src="@/assets/icon/wode_n.png" alt="">
            </div>
            <div class="router-box-text">我的</div>
          </div>
        </RouterLink>

      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style lang="less" scoped>
.auto-img {
  width: 100%;
  height: 100%;
  display: block;
}

.wrapper {
  z-index: 2000;

  nav {
    height: 50px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: -1px;
    border-top: 1px solid rgba(177, 177, 177, .2);
    background-color: #fdfdfd;
    display: flex;
    padding: 5px 0;
    font-size: 12px;

    a {
      flex: 1;
      color: #727272;
    }

    .router-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      // justify-content: center;

      .router-box-icon {
        width: 25px;
        height: 25px;
        // background-color: greenyellow;
      }

      .router-box-text {
        height: 20px;
      }
    }
  }
}

.gologin {
  height: 35px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 49px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  align-items: center;
  padding: 0 10px;

  .gologin-text {
    font-size: 13px;
    font-weight: 400;
  }

  .gologin-btn {
    width: 75px;
    background-color: #5b6cd4;
    height: 27px;
    border-radius: 2px;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
